CircleCIの新UIでHello Worldしてみた

CircleCIの新UIでHello Worldしてみた

CircleCI初級者が新UIでサインアップからGitHub連携のビルドを行うまで。
Clock Icon2020.04.16

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、CX事業本部の若槻です。

現在、CI/CDサービスCircleCIでは新しいユーザーインターフェイス(新UI)が導入されつつあります。

そこで今回はCircleCIのドキュメントを参考にしつつ、この新UIからHello Worldをしてみました。

CircleCIのサインアップ

まず、ドキュメント[CircleCI を始める]をもとにCircleCIのサインアップを行います。連携させるVCSはGitHubです。

ユーザー登録ページにアクセスします。[GitHun でログイン]をクリックします。 image.png

CircleCIに連携するGitHubアカウントへのサインインを求められます。ID・パスワードを入力し[Sign in]をクリックして認証を行います。 image.png

CircleCIに付与される権限が示されるので確認したら[Authorize circleci]をクリックします。GitHubの場合はPublicおよびPrivateリポジトリの読み取り/書き込み権限、ユーザーメールアドレスの読み取り権限がCircleCIに付与されるようです。 image.png

GitHubのどのorganizationを連携するか選択を求められるので選択します。 image.png

すると[Projects]ページが開き、連携したGitHub組織からリポジトリが読み込まれていることがProject一覧から確認できます。ユーザーインターフェイスはすでに新UIになっていますね。 image.png

これでCircleCIへのGitHub連携によるサインアップができました。

Hello Worldをしてみる

次に、ドキュメント[Hello World]をもとにCircleCIでHello Worldをしてみます。

まずGitHubで新しいリポジトリを作ります。今回はcircleci-helloworldという名前で作りました。 image.png

すると、CircleCIのProject一覧に「circleci-helloworld」リポジトリがProjectとして自動で追加されました。このリポジトリの[Set Up Project]をクリックします。 image.png

[Add Config]をクリックします。 image.png

Pipeline一覧ページに自動遷移します。circleci-project-setupというブランチのwelcomeというworkflowが2つ開始されています。 image.png

GitHubでcircleci-helloworldリポジトリを見ると、circleci-project-setupブランチが作成され、ファイル.circleci/config.ymlが追加されていました。 image.png

また、circleci-helloworldリポジトリのデフォルトブランチがcircleci-project-setupブランチに変更されていました。(これはちょっと予想外の動作でした) image.png

circleci-project-setupブランチに作成された.circleci/config.ymlファイルは以下のような内容でした。

# Use the latest 2.1 version of CircleCI pipeline process engine. See: https://circleci.com/docs/2.0/configuration-reference
version: 2.1
# Use a package of configuration called an orb.
orbs:
  # Declare a dependency on the welcome-orb
  welcome: circleci/[email protected]
# Orchestrate or schedule a set of jobs
workflows:
  # Name the workflow "welcome"
  welcome:
    # Run the welcome/run job in its own container
    jobs:
      - welcome/run

workflowはどちらもSUCCESSとなりました。(なんで2つ走ったんだろう…) image.png

次に、.circleci/config.ymlを以下の内容で更新してコミットします。

version: 2
jobs:
  build:
    docker: # Executor タイプです。他に machine、macOS という実行タイプを指定できます
      - image: circleci/node:4.8.2 # プライマリコンテナです。このなかでジョブコマンドが実行されます
    steps:
      - checkout # プロジェクトのディレクトリにあるコードをチェックアウトします
      - run: echo "hello world" # 「echo」コマンドを実行します

更新とコミットはGitHubのコンソールから行いました。 image.png

するとworkflowというworkflowが開始されました。 image.png

SUCCESSしたようです。workflowをクリックして開いてみます。 image.png

buildというジョブが確認できます。クリックして開いてみます。 image.png

buildジョブで実行されたステップが確認できます。exho "hello world"ステップを開いてみると、hello worldが標準出力されていました。 image.png

簡単ですがこれでCircleCIの新UIでHello Worldすることができました。

おわりに

以上、CircleCI初級者のわたしが新UIでサインアップからGitHub連携のビルドを行ってHello Worldをしてみるまでの一連の流れでした。

因みにわたしがどのくらい初級者かと言うと、

  • 開発のCI/CDツールとしてCircleCIを使ってはいる(半年くらい)
  • CircleCI自体のセットアップはしたことがない。自動実行されるWorkflowの成否を見守るくらい
  • 使っているCircleCI環境はまだ旧UI。新UIを触ったことはほとんどなかった

くらいには初級者です。引き続きCircleCIを自分で触りまくって"新UIで"使いこなせるようになりたいと思います。

以上

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.